<script setup>
import { onMounted, onUnmounted } from 'vue'

const emit = defineEmits(['load-more'])

let observer = null

onMounted(() => {
  observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      emit('load-more')
    }
  })
  observer.observe(document.querySelector('#sentinel'))
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<template>
  <div id="sentinel" class="h-10"></div>
</template>
